<template>
    <div>
        <!-- 头部 -->
        <div class="head">
            <span class="bt">&lt;</span>
            <span>我的E宠</span>
            <span>•••</span>
        </div>
        <!-- 登录|注册 -->
        <div class="userInfo">
            <div class="userSet">
                <img src="" alt="">
                <img src="" alt="">
            </div>
            <div class="clearfix">
                <img src="https://static.epetbar.com/static_wap/appmall/avatar/dog.png" alt="">
                <p><span>登录</span>|<span>注册</span></p>
            </div>
            <div class="awardes">
                <img v-for="item in messages[0].data.items" :key="item.id" :src="item.above_image.img_url" alt="">
            </div>
        </div>
        <!-- 订单服务 -->
        <div class="myorder">
            <div v-for="item in messages[1].data.items" :key="item.id" class="orderli">
                <img :src="item.above_image.img_url" alt="">
                <span>{{ item.sub_title }}</span>
            </div>
        </div>
        <!-- 钱包 -->
        <div class="wallet">
            <div v-for="item in messages[2].data.items" :key="item.id" class="walletli">
                <span>{{ item.above_text }}</span>
                <p>{{ item.below_text }}</p>
            </div>
        </div>
        <!-- 工具栏 -->
        <div class="myservice">
            <div class="serviceTop">
                <span>工具与服务</span><span>&gt;</span>
            </div>
            <div class="serviceWarp">
                <div v-for="item in messages[3].data.items" :key="item.id" class="serviceItem">
                    <img :src="item.above_image.img_url" alt="">
                    <span>{{ item.below_text }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            messages: [],
            awardImg:[]
        }
    },
    methods: {
        getmsg() {
            fetch('./a.json')
                .then((s) => s.json())
                .then((s) => {
                    this.messages = s.list
                console.log(this.messages[0].data);
                }) .catch(error => {console.error('Error fetching data:', error);  
                }); 
        }
    },
    mounted() {
        this.getmsg()
    },
}
</script>

<style  scoped lang="scss">
// 头部
.head{
    width: 375px;
    height: 50px;
    display: flex;
    box-sizing: border-box;
    padding: 0px 10px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    font-size: 18px;
    .bt{
        font-size: 24px;
    }
}
// 登录注册
.userInfo{
    width: 100%;
    height: 207px;
    background-color:#74BE5F;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .userSet{
        width: 100%;
        height: 24px;
        box-sizing: border-box;
        padding: 0px 15px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        img{
            width: 24px;
            height: 24px;
        }
    }
    .clearfix{
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        img{
            width: 70px;
            height: 70px;
            vertical-align: middle;
        }
        span{
            padding: 0 10px ;
        }
    }
    .awardes{
        width: 355px;
        height: 35px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 5px 10px;
        background-color: black;
        display: flex;
        align-items: center;
        border-top-right-radius: 12px ;
        border-top-left-radius: 12px ;
        img{
            width: 64px;
            height: 15px;
            vertical-align: middle;
            margin-right: 20px;
        }
    }
}
// 订单服务
.myorder{
    width: 355px;
    height: 118px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    align-items: flex-end;
    padding-bottom: 10px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 12px;
    .orderli{
        display: flex;
        width: 60px;
        height: 50px;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        img{
            width: 24px;
            vertical-align: middle;
        }
        span{
            font-size: 14px;
        }
    }
}
// 钱包
.wallet{
    width: 355px;
    height: 100px;
    display: flex;
    box-sizing: border-box;
    align-items: flex-end;
    padding-bottom: 10px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 12px;
    .walletli{
        display: flex;
        width: 60px;
        height: 45px;
        margin-right: 20px;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        span{
            width: 24px;
            vertical-align: middle;
            color: red;
        }
        p{
            font-size: 14px;
        }
    }
}
// 工具栏
.myservice{
    width: 355px;
    margin: 20px auto;
    box-sizing: border-box;
    padding:20px 10px 50px;
    background-color: #fff;
    border-radius: 12px;
    .serviceTop{
        width: 100%;
        height: 25px;
        display: flex;
        box-sizing: border-box;
        padding: 0px 10px ;
        justify-content: space-between;
    }
    .serviceWarp{
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        
        .serviceItem{
            width: 78px;
            height: 50px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            img{
                width: 20px;
                height: 20px;
            }
            span{
                font-size: 12px;
            }
        }
    }
}
</style>